<template>
    <div class="guessLike">
    <div class="likeHead">
      <i class="icon"></i>
      <span>你可能喜欢</span>
    </div>
    <!-- 猜你喜欢数据列表信息 -->
    <div class="goodsList">
        <div class="item" v-for="(like, index) in likes" :key="like.id" @click="enterDetail(like.id, index)">
          <img v-lazy="like.pic" alt="">
        <p>{{like.name}}</p>
        <div class="itemPrice">
          <div>
            <span class="price">{{like.minPrice | currency}}</span>
            <s>{{like.originalPrice | currency}}</s>
          </div>
          <van-icon class="iconfont" class-prefix="icon" name="jiahao" color="#f66" size="26" @click.stop="addHomeCarts(like)"></van-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { currency } from '@filters'
import { mapMutations, mapState } from 'vuex'
import { Toast } from 'vant'
export default {
  props: {
    likes: {
      type: Array,
      required: true
    }
  },
  computed: {
    ...mapState({
      cartItems: state => state.cart.carts.items
    })
  },
  methods: {
    enterDetail (id, index) {
      this.$emit('detail', { id, index })
    },
    addHomeCarts (item) {
      // 看看商品是否已经存在于购物车，如果存在就提醒不可以再添加，否则添加进去
      const isExist = this.cartItems.find(ele => ele.id === item.id)
      if (isExist) {
        Toast('商品已经在您的购物车中，请不要重复添加')
      } else {
        this.addCart({
          ...item,
          num: 1,
          isChecked: true
        })
        Toast('添加购物车成功')
      }
    },
    ...mapMutations('cart', ['addCart'])
  },
  filters: {
    currency
  }
}
</script>

<style lang="scss" scoped>
  .guessLike {
    .likeHead {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1.6rem;
      line-height: 1.6rem;
      text-align: center;
      color: #dadada;
      .icon {
        background-image: url('../../../assets/img/bg2.png');
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 20px;
        height: 20px;
      }
      span {
        font-size: 20PX;
        margin-left: 3PX;
      }
    }
    .goodsList {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding: 5PX;
      .item {
      width: 50%;
      box-sizing: border-box;
      padding: 5PX;
      img {
        width: 100%;
      }
      p {
        margin-top: 10PX;
        color: #444;
        font-size: 16PX;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .itemPrice {
        margin-top: 10PX;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .price {
          color: #f66;
          font-size: 16PX;
        }
        s {
          color: #ccc;
          font-size: 14PX;
          margin-left: 5PX;
        }
      }
    }
    }
  }
</style>
